<template>
  <view class="home-index-container">
    <view @scroll.prevent="onPageScroll">
      <Header :isColorLight="isColorLight"></Header>
      <Recomend></Recomend>
      <List></List>

      <custormTabbar ref="tabbar"></custormTabbar>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from "vue";
import List from "./list.vue";
import custormTabbar from "../../components/Tabbar/index.vue";
import uaLoading from "../../components/pageLoading/index.vue";
import Recomend from "./recomend.vue";
import Header from "./header-banner.vue";
const loadingstyle = ref(true);
import Taro, { useDidShow, usePageScroll } from "@tarojs/taro";
import { createSelectorQuery } from "@tarojs/taro";
// 监听页面滚动
const content = ref();
const isColorLight = ref(false);
useDidShow(() => {});
usePageScroll((res) => {
  if (res.scrollTop >= 80) {
    isColorLight.value = true;
  } else {
    isColorLight.value = false;
  }
});
</script>

<style lang="scss">
.home-index-container {
  display: flex;
  flex-direction: column;
  // height: 100vh;
}
</style>
